package com.carbohydrate42.kotlin_compose_demo.compose

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Color.Companion.LightGray
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import java.time.LocalDateTime
import java.time.format.DateTimeFormatter

val MainThemeColor = Color(0xFF009999)


/**
 * 参考
 *
 * https://proandroiddev.com/a-step-by-step-guide-to-building-a-timeline-component-with-jetpack-compose-358a596847cb
 */
@Composable
@Preview(showBackground = true, showSystemUi = true)
fun TimeLinePreview() {

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .verticalScroll(rememberScrollState())
    ) {

        repeat(20) {

            TimelineNode { modifier ->
                MessageBubble(modifier, containerColor = LightGray)
            }
        }
    }
}

@Composable
private fun MessageBubble(modifier: Modifier, containerColor: Color) {

    val dateTime = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss").format(LocalDateTime.now())

    Column(
        modifier = modifier

    ) {
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Text(text = "刚刚", color = MainThemeColor, fontWeight = FontWeight.Bold)
            Text(text = "$dateTime admin", color = MainThemeColor)
        }


        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.Start
        ) {
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(100.dp),
                colors = CardDefaults.cardColors(containerColor = containerColor)
            ) {


            }
        }

    }
}

data class CircleParameters(
    val radius: Dp,
    val backgroundColor: Color
)

data class LineParameters(
    val strokeWidth: Dp,
    val brush: Brush
)

object LineParametersDefaults {

    private val defaultStrokeWidth = 3.dp

    fun linearGradient(
        strokeWidth: Dp = defaultStrokeWidth,
        startColor: Color = LightGray,
        endColor: Color = LightGray,
        startY: Float = 0.0f,
        endY: Float = Float.POSITIVE_INFINITY
    ): LineParameters {
        val brush = Brush.verticalGradient(
            colors = listOf(startColor, endColor),
            startY = startY,
            endY = endY
        )
        return LineParameters(strokeWidth, brush)
    }
}

@Composable
fun TimelineNode(
    contentStartOffset: Dp = 32.dp,
    spacerBetweenNodes: Dp = 32.dp,
    circleParameters: CircleParameters = CircleParameters(10.dp, MainThemeColor),
    lineParameters: LineParameters = LineParametersDefaults.linearGradient(),
    content: @Composable BoxScope.(modifier: Modifier) -> Unit,
) {
    Box(
        modifier = Modifier
            .wrapContentSize()
            .drawBehind {
                val circleRadiusInPx = circleParameters.radius.toPx()

                drawCircle(
                    color = circleParameters.backgroundColor,
                    radius = circleRadiusInPx,
                    center = Offset(circleRadiusInPx, circleRadiusInPx)
                )

                drawLine(
                    brush = lineParameters.brush,
                    start = Offset(x = circleRadiusInPx, y = circleRadiusInPx * 2),
                    end = Offset(x = circleRadiusInPx, y = this.size.height),
                    strokeWidth = lineParameters.strokeWidth.toPx()
                )
            }
    ) {

        content(
            Modifier
                .padding(
                    start = contentStartOffset,
                    bottom = spacerBetweenNodes
                )

        )
    }
}